<template>
    <div class="register-container">
        <el-card class="register-card" shadow="hover">
            <div class="clearfix">
                <h1>注册</h1>
            </div>
            <el-form ref="registerFormRef" :model="registerForm" :rules="rules" label-width="100px" label-position="top"
                @submit.prevent="handleRegister">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="button-container">
                        <button class="learn-more" native-type="submit">注册</button>
                        <button class="learn-more" @click="goToLogin">返回</button>
                    </div>
                    <!-- <el-button type="primary" native-type="submit">注册</el-button>
                    <el-button type="primary" @click="goToLogin">返回</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage, ElCard, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import axios from '../axios';
import { useRouter } from 'vue-router';

const router = useRouter();
// 表单数据
const registerForm = reactive({
    username: '',
    password: '',
    confirmPassword: ''
});

// 表单验证规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
};

// 表单引用
const registerFormRef = ref(null);

// 注册处理函数
const handleRegister = () => {
    if (!registerFormRef.value) return;
    registerFormRef.value.validate((valid) => {
        if (valid) {
            axios.post('/super-admin/register', registerForm)
                .then(response => {
                    ElMessage.success('注册成功');
                    router.push('/login');
                    // 可以在这里添加跳转到登录页面或其他逻辑
                })
                .catch(error => {
                    if (error.response && error.response.status === 400) {
                        ElMessage.error(error.response.data);
                    } else {
                        ElMessage.error('注册失败，请稍后再试');
                    }
                });
        } else {
            ElMessage.error('表单验证失败，请检查输入');
        }
    });
};
const goToLogin = () => {
    router.push('/login');
};
</script>
<style scoped>
::v-deep.el-form-item .el-input__inner {
    height: 40px;
    font-size: 16px;
}

.clearfix {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 98vh;
    background-color: #f0f2f5;
}

.register-card {
    width: 400px;
    padding: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

/* From Uiverse.io by Madflows */
button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
}

button.learn-more {
    font-weight: 600;
    color: #382b22;
    text-transform: uppercase;
    padding: 1.25em 2em;
    background: #fff0f0;
    border: 2px solid #b18597;
    border-radius: 0.75em;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9c4d2;
    border-radius: inherit;
    -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
    box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
    -webkit-transform: translate3d(0, 0.75em, -1em);
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more:hover {
    background: #ffe9e9;
    -webkit-transform: translate(0, 0.25em);
    transform: translate(0, 0.25em);
}

button.learn-more:hover::before {
    -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
    box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
    -webkit-transform: translate3d(0, 0.5em, -1em);
    transform: translate3d(0, 0.5em, -1em);
}

button.learn-more:active {
    background: #ffe9e9;
    -webkit-transform: translate(0em, 0.75em);
    transform: translate(0em, 0.75em);
}

button.learn-more:active::before {
    -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
    box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
    -webkit-transform: translate3d(0, 0, -1em);
    transform: translate3d(0, 0, -1em);
}
.button-container {
  display: flex;
  gap: 170px; /* 控制两个按钮之间的距离 */
}
</style>